<template>
  <div class="tools">
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action=""
      multiple
      :http-request="handleSubmit"
      :before-upload="handleBeforeUpload"
      :show-file-list="false"
      style="margin-left:10px"
    >
      <el-icon><FolderAdd /></el-icon>
    </el-upload>
    <el-progress
      v-if="uploadStatus"
      :text-inside="true"
      :stroke-width="15"
      :percentage="percentageVal"
      status="success"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import type { UploadProps } from "element-plus";
import { sliceFile } from "@/utils/file";
import { useConuntStore } from "@/store/home";
const countstore = useConuntStore();
let fileInput = ref();
const fileList = ref([]);
const handleSubmit = () => {};
let percentageVal = ref(0)
interface resIn{
  code:number,
  msg:string
}
const uploadStatus = ref(false)
// 监听时立即执行一次回调
watch(
  ()=>[countstore.processValue],
  ([val]) => {
    percentageVal.value = Number(val.toFixed(2)) * 100
  },
  { immediate: true,deep:true }
)
const handleBeforeUpload = async (file: File) => {
  const startDate = Date.now();
  if(file.size > 1024*1024*100){
    ElMessage.warning('文件最大不能超过100M')
    return
  }
  uploadStatus.value = true
  let res = await sliceFile(file) as resIn
  const endDate = Date.now();
  if(res.code == 200){
    ElMessage.success(res.msg + '耗时： ' + (endDate - startDate) +' ms' )
  }else{
    ElMessage.error(res.msg)
    uploadStatus.value = false
  }
  setTimeout(()=>{
    uploadStatus.value = false
    countstore.processValue = 0
  },1000)
};

const handleClick = () => {
  fileInput.value.click();
};
</script>

<style lang="less" scoped>
.tools {
  width: 100%;
  height: 30px;
  //   background-color: pink;
  display: flex;
  align-items: center;
  .el-progress--line {
    width: 300px;
    margin-left: 10px;
  }
  .upload-demo{
    .el-upload{
      .el-icon{
        color: var(--xb-text-color);
      }
    }
  }
}
</style>